<template>
	<view class="status_bar">
		<!-- 这里是状态栏 -->
	</view>
	<view class="self">
		<view class="info">
			<view class="info-name">{{ userInfo.name }}</view>
			<view class="info-email">{{ userInfo.email }}</view>
		</view>
		<view class="avatar" @click="handleAvatar">
			<image :src="avatar"></image>
		</view>
	</view>
	<view class="self-bar">
		<uni-list>
			<uni-list-item clickable link="navigateTo" title="编辑信息" to="/pages/friendNews/friendNews"></uni-list-item>
			<uni-list-item clickable link="navigateTo" title="系统设置" to="/pages/friendNews/friendNews"></uni-list-item>
			<uni-list-item clickable title="退出登录"></uni-list-item>
		</uni-list>
	</view>
</template>


<script setup lang="ts">
	import { ref, computed } from 'vue';
	import config from '../../common/config'
	import request from '../../common/request';
	let userInfo = ref(uni.getStorageSync('userInfo'))
	console.log(userInfo.value)
	const avatar = computed(() => {
		return userInfo.value.avatar ? config.apiHost + userInfo.value.avatar : ''
	})
	
	const handleAvatar = () => {
		uni.chooseImage({
			count: 1,
			mediaType: ['image'],
			sourceType: ['album'],
			sizeType: ['compressed'],
			// tempFiles 本地临时文件列表
			success: ({ tempFilePaths, tempFiles }) => {
				console.log(tempFiles)
				console.log(tempFilePaths)
				let _files: string = Array.isArray(tempFilePaths) ? tempFilePaths[0] : tempFilePaths
				request.upload({
					files: _files,
					type: '1',
					success: (res: any) => {
						if (res.statusCode === 200) {
							const result = JSON.parse(res.data)
							const { code, msg, result:data } = result
							if (code) {
								userInfo.value['avatar'] = data.avatar
								uni.setStorageSync('userInfo', userInfo.value)
							} else {
								uni.showToast({
									title: msg
								})
							}
						}
					},
					fail: undefined,
					complete: undefined
				})
			},
			fail: () => {
				
			},
			complete: () => {
				
			}
		})
	}
</script>

<style lang="scss">
	.self {
		// box-shadow: 0 0 6rpx rgba(0, 0, 0, .12);
		background-color: #ffffff;
		height: 260rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		.info {
			&-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #1296db;
				width: 360rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin-bottom: 10rpx;
			}
			&-email {
				font-size: 28rpx;
				color: #606060;
				text-decoration: underline;
				margin-bottom: 40rpx;
			}
		}
		.avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			border: 1px solid #efefef;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
